<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>组件传值</title>
</head>


<body>
  
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
               title:'hello vue,js',
               likes:'123',
               funVal:function(){
                   alert:('abc')
               }
            }
        },
        template:`
        <test title="I am title"/>
        <test :like-val="likes" :fun-val="funVal"/>
        `
    })
        app.component('test',{
            props:{
                title:{
                    type: String,
                    default:'hello'
                
            },
            ids:{
                type:Array,
                dafault:function(){
                    return['a','b']
                }
            },
            likeVal:{
                type:Number,
                default:function(){return 1000},
                validator:function(value){
                console.log('likeval-0--=' + value)
                validator:function(value){
                    console.log('likeval-----' +value)
                    return value >1000
                }
                },
                funval:{
                    type: Function
                }
            },
            template:`
            <div @click="handlefun">{{title}}------{{likeval}}-----{{ids}}</div>
            <div>{{typeof title}}</div>
            `,
            methods:{
                handlefun(){
                    alert('DEF'),
                    this.funVal();
                }
            
 
</script>

</html>